import React, { useEffect, useRef } from "react";
import { Row, Col, Card } from "antd";
import "./index.less";
import axios from "axios";
import request from "@/utils/request";
// import * as echarts from 'echarts'
import { init } from "echarts";
import barOption from "./chart-option/bar";
import lineOption from "./chart-option/line";
import pie from "./chart-option/pie";
export default function DashBoard() {
  let barRef = useRef();
  let lineRef = useRef();
  let pieRef = useRef();
  useEffect(() => {
    //初始化饼状图
    // let pieChart = init(pieRef.current)
    // 异步写法
    // request.get('/classes/DashBoard').then(res=>{
    //   console.log(res);
    //   let {data} = res.data.results[0]
    //   pie.series[0].data = data
    //   pieChart.setOption(pie)
    // })
    (async () => {
      //初始化柱状图
      let barChart = init(barRef.current);
      barChart.setOption(barOption);
      //初始化折线图
      let lineChart = init(lineRef.current);
      lineChart.setOption(lineOption);

      // 方法2:
      let pieChart = init(pieRef.current);
      let res = await request.get("/classes/DashBoard");
      let { data } = res.data.results[0];
      pie.series[0].data = data;
      pieChart.setOption(pie);
    })();
  }, []);
  return (
    <div className="box">
      <Row>
        <Col span={24}>
          <Card>
            <div className="chart" ref={barRef}></div>
          </Card>
        </Col>
      </Row>
      <Row gutter={20} className="chart-cont">
        <Col span={12}>
          <Card>
            <div className="chart" ref={lineRef}></div>
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <div className="chart" ref={pieRef}></div>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
